<template>
  <div>
    <div v-for="(group, index) in selectedNode.props.groups" :key="index + '_g'" class="group">
      <div class="group-header">
        <span class="group-name">条件组 {{ groupNames[index] }}</span>
        <div class="group-cp">
          <span>组内条件关系：</span>
          <el-switch v-model="group.groupType" active-color="#409EFF"
                     inactive-color="#c1c1c1" active-value="AND" inactive-value="OR"
                     active-text="且" inactive-text="或" size="default"/>
        </div>
        <div class="group-operation">
          <el-popover placement="bottom" title="选择审批条件" width="300" trigger="click">
            <!-- <div>以下条件将决定具体的审批流程</div>-->
            <el-checkbox-group v-model="group.cids" value-key="id">
              <el-checkbox :label="condition.id" v-for="(condition, cindex) in conditionList" :key="condition.id" @change="conditionChange(cindex, group)">
                {{ condition.title }}
              </el-checkbox>
            </el-checkbox-group>
            <template #reference>
              <el-icon><Plus /></el-icon>
            </template>
          </el-popover>
          <el-icon @click="delGroup(index)"><Delete /></el-icon>
        </div>
      </div>
      <div class="group-content">
        <p v-if="group.conditions.length === 0">点击右上角 + 为本条件组添加条件 ☝</p>
        <div v-else>
          <el-form ref="conditionForm" label-width="100px">
            <!--构建表达式-->
            <el-form-item  v-for="(condition, cindex) in group.conditions" :key="condition.id + '_' + cindex" >
              <template #label>
                <ellipsis hover-tip :content="condition.title"/>
              </template>
               <span v-if="condition.valueType === ValueType.string">
                <el-select  placeholder="判断符" style="width: 120px;" v-model="condition.compare" @change="condition.value = []">
                  <el-option label="等于" value="="></el-option>
                  <el-option label="包含在" value="IN"></el-option>
                </el-select>
                 <span v-if="isSelect(condition.id)" style="margin-left: 10px">
                   <el-select v-if="condition.compare === 'IN'" style="width: 280px;" clearable multiple v-model="condition.value" placeholder="选择值">
                     <el-option v-for="(option, oi) in getOptions(condition.id)" :key="oi" :label="option" :value="option"></el-option>
                   </el-select>
                   <el-select v-else style="width: 280px;" clearable v-model="condition.value[0]" placeholder="选择值">
                     <el-option v-for="(option, oi) in getOptions(condition.id)" :key="oi" :label="option" :value="option"></el-option>
                   </el-select>
                 </span>
                 <span v-else style="margin-left: 10px">
                   <el-input v-if="condition.compare === '='" style="width: 280px;" placeholder="输入比较值" v-model="condition.value[0]"/>
                   <el-select v-else style="width: 280px;" multiple clearable filterable allow-create v-model="condition.value" placeholder="输入可能包含的值"></el-select>
                 </span>
              </span>
              <span v-else-if="condition.valueType === ValueType.number">
                <el-select placeholder="判断符" style="width: 120px;" v-model="condition.compare">
                  <el-option :label="exp.label" :value="exp.value" :key="exp.value" v-for="exp in explains"></el-option>
                </el-select>
                <span style="margin-left: 10px">
                  <el-input style="width: 280px;" v-if="conditionValType(condition.compare) === 0" placeholder="输入比较值" type="number" v-model="condition.value[0]"/>
                  <el-select style="width: 280px;" multiple filterable allow-create v-else-if="conditionValType(condition.compare) === 1" v-model="condition.value" placeholder="输入可能包含的值"></el-select>
                  <span v-else>
                    <el-input style="width: 130px;" type="number" placeholder="输入比较值" v-model="condition.value[0]"/>
                    <span> ~
                      <el-input size="default" style="width: 130px;" type="number" placeholder="输入比较值" v-model="condition.value[1]"/>
                    </span>
                  </span>
                </span>
              </span>
              <span v-else-if="condition.valueType === ValueType.user">
                <span class="item-desc" style="margin-right: 20px">属于某部门 / 为某些人其中之一</span>
                <el-button size="small" :icon="Plus" type="primary" @click="selectUser(condition.value, 'org'); condition.compare = 'ORG'" round>选择人员/部门</el-button>
                <org-items v-model="condition.value"/>
              </span>
              <span v-else-if="condition.valueType === ValueType.dept">
                <span class="item-desc" style="margin-right: 20px">为某部门 / 某部门下的部门</span>
                <el-button size="small" :icon="Plus" type="primary" @click="selectUser(condition.value, 'dept'); condition.compare = 'DEPT'" round>选择部门</el-button>
                <org-items v-model="condition.value"/>
              </span>
              <span v-else-if="condition.valueType === ValueType.date"></span>
              <el-icon @click="rmSubCondition(group, cindex)"><Delete /></el-icon>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <org-picker :type="orgType" multiple ref="orgPicker" :selected="users" @ok="selected"></org-picker>
  </div>
</template>

<script>
import OrgPicker from '/@/views/setting/workflow/process/OrgPicker.vue'
import OrgItems from "/@/views/setting/workflow/process/OrgItems.vue";
import { ValueType } from '/@/views/setting/workflow/config/ComponentsConfigExport'
import { Plus, Delete } from '@element-plus/icons-vue'
import { computed, reactive, ref, toRefs } from 'vue';
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'

export default {
    name: "ConditionGroupItemConfig",
    components: {
        OrgPicker, 
        OrgItems,
        Plus,
        Delete
    },
    setup() {
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const orgPicker = ref()
        const state = reactive({
            ValueType,
            users: [],
            orgType: 'user',
            showOrgSelect: false,
            //groupConditions: [],
            groupNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
            supportTypes:[ValueType.number, ValueType.string, ValueType.date, ValueType.dept, ValueType.user],
            explains:[
                {label: '等于', value:'='},
                {label: '大于', value:'>'},
                {label: '大于等于', value:'>='},
                {label: '小于', value:'<'},
                {label: '小于等于', value:'<='},
                {label: '包含在', value:'IN'},
                {label: 'x < 值 < x', value:'B'},
                {label: 'x ≤ 值 < x', value:'AB'},
                {label: 'x < 值 ≤ x', value:'BA'},
                {label: 'x ≤ 值 ≤ x', value:'ABA'},
            ]
        })
        const selectedNode = computed(() => {
            return workFlowConfig.selectedNode.value
        })
        const select = computed(() => {
            return selectedNode.value.props.assignedUser || []
        })
        const formItems = computed(() => {
            return workFlowConfig.design.value.formItems
        })
        const formMap = computed(() => {
            const map = new Map();
            formItems.value.forEach(item => itemToMap(map, item))
            return map
        })
        const conditionList = computed(() => {
            //构造可用条件选项
            const conditionItems = []
            formItems.value.forEach(item => filterCondition(item, conditionItems))
            if (conditionItems.length === 0 || conditionItems[0].id !== 'root'){
                conditionItems.unshift({id: 'root', title: '发起人', valueType: 'User'})
            }
            return conditionItems
        })
        const itemToMap = (map, item) => {
            map.set(item.id, item)
            if (item.name === 'SpanLayout'){
                item.props.items.forEach(sub => itemToMap(map, sub))
            }
        }
        const isSelect = (formId) => {
            let form = formMap.value.get(formId)
            if (form && (form.name === 'SelectInput' || form.name === 'MultipleSelect')){
                return true
            }
            return false
        }
        const getOptions = (formId) => {
            return formMap.value.get(formId).props.options || []
        }
        const conditionValType = (type) => {
            switch (type){
                case '=':
                case '>':
                case '>=':
                case '<':
                case '<=': return 0;
                case 'IN': return 1;
                default: return 2;
            }
        }
        const selectUser = (value, orgType) => {
            state.orgType = orgType
            state.users = value
            orgPicker.value.show()
        }   
        const filterCondition = (item, list) => {
            if (item.name === 'SpanLayout'){
                item.props.items.forEach(sub => filterCondition(sub, list))
            }else if (state.supportTypes.indexOf(item.valueType) > -1 && item.props.required){
                list.push({title: item.title, id: item.id, valueType: item.valueType})
            }
        }
        const selected = (select) => {
            console.log(select)
            state.users.length = 0
            select.forEach(u => state.users.push(u))
        }
        const delGroup = (index) => {
            selectedNode.value.props.groups.splice(index, 1)
        }
        const rmSubCondition = (group, index) => {
            group.cids.splice(index, 1)
            group.conditions.splice(index, 1)
        }
        const conditionChange = (index, group) => {
            //判断新增的
            group.cids.forEach(cid => {
                if (0 > group.conditions.findIndex(cd => cd.id === cid)){
                    //新增条件
                    let condition = {...conditionList.value[index]}
                    console.log(condition, conditionList.value, index)
                    condition.compare = '';
                    condition.value = []
                    group.conditions.push(condition)
                }
            })
            for (let i = 0; i < group.conditions.length; i++) {
                //去除没有选中的
                if (group.cids.indexOf(group.conditions[i].id) < 0){
                    group.conditions.splice(i, 1)
                }
            }
        }
        return {
            ...toRefs(state),
            Plus,
            selectedNode,
            select,
            formItems,
            formMap,
            conditionList,
            itemToMap,
            isSelect,
            getOptions,
            conditionValType,
            orgPicker,
            selectUser,
            filterCondition,
            selected,
            delGroup,
            rmSubCondition,
            conditionChange
        }
    }
}
</script>

<style lang="scss" scoped>
.group {
  margin-bottom: 20px;
  color: #5e5e5e;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e3e3e3;

  .group-header {
    padding: 5px 10px;
    background: #e3e3e3;
    position: relative;
    .group-name {
      font-size: small;
    }

    .group-cp {
      font-size: small;
      position: absolute;
      left: 100px;
      display: flex;
      top: -2px;
      justify-content: center;
      align-items: center;
    }

    .group-operation {
      position: absolute;
      right: 10px;
      top: 5px;
      :deep(.icon) {
        padding: 0 10px;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .group-content{
    padding: 10px 5px;
    p{
      text-align: center;
      font-size: small;
    }
    .el-icon-delete{
      position: absolute;
      cursor: pointer;
      top: 12px;
      right: 0;
    }
  }

  .condition-title{
    display: block;
    width: 100px;
  }
}
</style>